<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>


<div id="app">

    <tree-folder></tree-folder>


</div>

</body>
<script src="../../../vender/vue@2.4.2.js"></script>
<script>
    Vue.component('tree-folder',{
        template:`<dl><dt>{{folder.name}}</dt><dd><tree-folder-children :children="folder.children"></tree-folder-children></dd></dl>`
    });

    Vue.component('tree-folder-children',{
        template:`<ul><li v-for="child of children"><tree-folder v-if="child.children" :folder="child"></tree-folder><span v-else>{{child.name}}</span></li></ul>`
    });

    var app=new Vue({
        el:'#app',
        data:{
            folder:{
                name:'root',
                children:[
                    {name:'a'},
                    {name:'b'},
                    {name:'c'}
                ]
            }
        }
    });



</script>
</html>